import React, { useState, useCallback } from "react";
import VoteFooter from "./VoteFooter";
import VoteMain from "./VoteMain";
import ThemeContext from "../ThemeContext";
/**
 * 和类组件没有太大的区别[向上下文中存放信息，没啥区别]
 */
export default function Vote() {
    let [supNum, setSupNum] = useState(0),
        [oppNum, setOppNum] = useState(0);
    const change = useCallback((type) => {
        if (type === 'sup') {
            setSupNum(supNum + 1)
            return
        }
        setOppNum(oppNum + 1)
    }, [supNum, oppNum])

    return <ThemeContext.Provider value={{
        supNum,
        oppNum,
        change
    }}>
        <div className="vote-box">
            <div className="header" style={{
                display: 'flex',
            }}>
                <h2 className="title">React是很棒的前端框架</h2>
                <span className="num" style={{
                    paddingTop: 23,
                    marginLeft: 56
                }}>{supNum + oppNum}</span>
            </div>
            <VoteMain />
            <VoteFooter />
        </div>
    </ThemeContext.Provider>
}
